<template>
  <el-radio :value="value" :label="label">{{ text }}</el-radio>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number, Boolean],
      default: ''
    },
    label: {
      type: [String, Number, Boolean],
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
.el-radio {
  display: flex;
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 14px;
  }

  .el-radio__input {
    display: flex;
    align-items: center;

    &.is-checked + .el-radio__label {
      color: #51c3ff;
    }
  }

  .el-radio__inner {
    width: 22px;
    height: 22px;
  }

  .el-radio__label {
    font-weight: normal;
    font-size: 20px;
    line-height: 28px;
    word-break: break-all;
    white-space: break-spaces;
    color: #333;
  }
}
</style>
